|
1
|
|
|
import Cropper from 'cropperjs' |
|
2
|
|
|
|
|
3
|
|
|
export class UserAccount { |
|
4
|
|
|
constructor() { |
|
5
|
|
|
this.addAvatarTypeListener() |
|
6
|
|
|
this.addAvatarSubmitButtonListener() |
|
7
|
|
|
this.initFileUpload() |
|
8
|
|
|
this.initAvatarCropper() |
|
9
|
|
|
} |
|
10
|
|
|
|
|
11
|
|
|
/** |
|
12
|
|
|
* Add a listener on the avatar type radio buttons and ajust display according to the user choice. |
|
13
|
|
|
*/ |
|
14
|
|
|
addAvatarTypeListener() { |
|
15
|
|
|
let container = $('#change_avatar') |
|
16
|
|
|
|
|
17
|
|
|
$('input[name="avatar_type"]', container).on('change', (event) => { |
|
18
|
|
|
let element = event.currentTarget |
|
19
|
|
|
|
|
20
|
|
|
$('.info span', container).hide() |
|
21
|
|
|
$('.profile-image img, .profile-image div').hide() |
|
22
|
|
|
$('.image-upload').hide() |
|
23
|
|
|
|
|
24
|
|
|
switch($(element).val()) { |
|
25
|
|
|
case 'initials': |
|
26
|
|
|
$('.info span.avatar-initials', container).show() |
|
27
|
|
|
$('.profile-image .initials').show() |
|
28
|
|
|
break |
|
29
|
|
|
|
|
30
|
|
|
case 'gravatar': |
|
31
|
|
|
$('.info span.avatar-gravatar', container).show() |
|
32
|
|
|
$('.profile-image .gravatar').show() |
|
33
|
|
|
break |
|
34
|
|
|
|
|
35
|
|
|
case 'image': |
|
36
|
|
|
$('.info span.avatar-image', container).show() |
|
37
|
|
|
$('.profile-image .image').show() |
|
38
|
|
|
$('.image-upload').show() |
|
39
|
|
|
break |
|
40
|
|
|
} |
|
41
|
|
|
}) |
|
42
|
|
|
} |
|
43
|
|
|
|
|
44
|
|
|
/** |
|
45
|
|
|
* Add a listner on the submit button |
|
46
|
|
|
*/ |
|
47
|
|
|
addAvatarSubmitButtonListener() { |
|
48
|
|
|
$('#avatar-submit').on('click', (event) => { |
|
|
|
|
|
|
49
|
|
|
$("#avatar-input").val(this.canvasDataUrl) |
|
50
|
|
|
$('#change_avatar form').submit() |
|
51
|
|
|
}) |
|
52
|
|
|
} |
|
53
|
|
|
|
|
54
|
|
|
/** |
|
55
|
|
|
* Init file upload. |
|
56
|
|
|
*/ |
|
57
|
|
|
initFileUpload() { |
|
58
|
|
|
$('#avatar-file').on('change', (event) => { |
|
59
|
|
|
let files = event.currentTarget.files |
|
60
|
|
|
|
|
61
|
|
|
if (files && files.length > 0) { |
|
62
|
|
|
let file = files[0] |
|
63
|
|
|
|
|
64
|
|
|
let reader = new FileReader() |
|
|
|
|
|
|
65
|
|
|
reader.onload = (e) => { |
|
|
|
|
|
|
66
|
|
|
this.cropper.replace(reader.result) |
|
67
|
|
|
} |
|
68
|
|
|
reader.readAsDataURL(file) |
|
69
|
|
|
} |
|
70
|
|
|
}) |
|
71
|
|
|
|
|
72
|
|
|
$('#upload-link').on('click', event => { |
|
73
|
|
|
event.preventDefault() |
|
74
|
|
|
$('#avatar-file').click() |
|
75
|
|
|
}) |
|
76
|
|
|
} |
|
77
|
|
|
|
|
78
|
|
|
/** |
|
79
|
|
|
* Init cropper for adjust the avatar image. |
|
80
|
|
|
*/ |
|
81
|
|
|
initAvatarCropper() { |
|
82
|
|
|
const image = document.getElementById('avatar-image-preview'); |
|
83
|
|
|
this.cropper = new Cropper(image, { |
|
84
|
|
|
aspectRatio: 1, |
|
85
|
|
|
autoCropArea: 1, |
|
86
|
|
|
minContainerWidth: 250, |
|
87
|
|
|
minContainerHeight: 250, |
|
88
|
|
|
zoomable: false, |
|
89
|
|
|
crop: (event) => { |
|
|
|
|
|
|
90
|
|
|
let canvas = this.cropper.getCroppedCanvas() |
|
91
|
|
|
|
|
92
|
|
|
// Convert image into data string |
|
93
|
|
|
this.canvasDataUrl = canvas.toDataURL() |
|
94
|
|
|
|
|
95
|
|
|
$("img.image").prop('src', this.canvasDataUrl) |
|
96
|
|
|
}, |
|
97
|
|
|
}) |
|
98
|
|
|
} |
|
99
|
|
|
} |
uccellolabs /
uccello
Loading history...
This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.